<template>
  <view class="rank-container">
    <up-navbar title="积分排行榜" :leftIcon="''"></up-navbar>
    <view class="fixed-header"></view>
    <view class="rank-banner">
      <image src="https://picsum.photos/600/200?random=1" mode="aspectFill" alt="排行榜banner图" class="banner-img"></image>
      <view class="banner-overlay">
        <text class="banner-title">积分排行</text>
        <text class="banner-subtitle">看看谁的积分最多！</text>
      </view>
    </view>

    <view v-if="ranking.length === 0" class="no-data-container">
      <view class="no-data-illustration">
        <text class="illustration-icon">📊</text>
      </view>
      <text class="no-data-text">暂无排行榜数据</text>
      <button class="refresh-btn" @click="refreshRanking">
        <text class="refresh-icon">🔄</text>
        <text>刷新</text>
      </button>
    </view>

    <view v-else class="rank-content">
      <view class="top-three-container">
        <view class="top-three-wrapper">
          <view v-for="(item, index) in topThree" :key="index"
                :class="['top-three-item', `top-three-${index + 1}`]"
                :style="{transform: `translateY(${index === 1 ? '0' : '20rpx'})`}">
            <view class="top-three-card">
              <view class="top-three-medal">
                <text class="medal-text">{{ index + 1 }}</text>
              </view>
              <view class="top-three-avatar-placeholder">
                <text class="avatar-placeholder-text">
                  {{ String(item.studentId).charAt(0) || '?' }}
                </text></view>
              <text class="top-three-name">{{ item.studentName }}</text>
              <text class="top-three-point">{{ item.totalPoints }} 积分</text>
            </view>
          </view>
        </view>
      </view>

      <view class="rank-list-container">
        <view class="rank-list-header">
          <text class="header-rank">排名</text>
          <text class="header-name">用户</text>
          <text class="header-point">积分</text>
        </view>
        <view class="rank-list-wrapper">
          <view v-for="(item, index) in otherRanking" :key="index"
                class="rank-item"
                :class="{ 'rank-item-highlight': (index + 4) % 5 === 0 }">
            <view class="rank-number-container">
              <text class="rank-number">{{ index + 4 }}</text>
            </view>
            <view class="rank-user-info">
              <view class="rank-avatar-placeholder">
                <text class="avatar-placeholder-text">{{ item.studentId.charAt(0) || '?' }}</text>
              </view>
              <text class="rank-name">{{ item.studentName }}</text>
            </view>
            <view class="rank-point-container">
              <text class="rank-point">{{ item.totalPoints }}</text>
              <text class="rank-point-unit">积分</text>
            </view>
          </view>
        </view>
      </view>
    </view>

    <view class="last-update-time" v-if="lastUpdateTime">
      最后更新: {{ lastUpdateTime }}
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted, computed, nextTick } from 'vue'
import { getRankingList } from '@/http/rank'
import { format } from 'date-fns'

const ranking = ref([])
const lastUpdateTime = ref('')
const isLoading = ref(false)

// 计算属性：前三名
const topThree = computed(() => ranking.value.slice(0, 3))
// 计算属性：其他排名
const otherRanking = computed(() => ranking.value.slice(3))

// 格式化日期时间
const formatDateTime = (date) => {
  return format(date, 'yyyy-MM-dd HH:mm:ss')
}

// 获取排行榜数据
const fetchRankingList = async () => {
  isLoading.value = true
  try {
    const data = await getRankingList()
    ranking.value = data || []
    lastUpdateTime.value = formatDateTime(new Date())

    // 添加入场动画
    nextTick(() => {
      const items = document.querySelectorAll('.rank-item')
      items.forEach((item, index) => {
        item.style.opacity = '0'
        item.style.transform = 'translateY(20px)'
        setTimeout(() => {
          item.style.transition = 'opacity 0.5s ease, transform 0.5s ease'
          item.style.opacity = '1'
          item.style.transform = 'translateY(0)'
        }, 50 * index)
      })
    })
  } catch (error) {
    uni.showToast({ title: '加载失败', icon: 'none' })
    console.error('Failed to load ranking:', error)
  } finally {
    isLoading.value = false
  }
}

// 刷新排行榜
const refreshRanking = async () => {
  if (isLoading.value) return
  await fetchRankingList()
  uni.showToast({ title: '刷新成功', icon: 'none' })
}

onMounted(async () => {
  await fetchRankingList()
})
</script>

<style scoped>
.rank-container {
  background-color: #f7f9fa;
  min-height: 100vh;
}

.rank-banner {
  position: relative;
  height: 300rpx;
  overflow: hidden;
}

.banner-img {
  width: 100%;
  height: 100%;
}

.banner-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, rgba(0,0,0,0.3), rgba(0,0,0,0.6));
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: white;
}

.banner-title {
  font-size: 48rpx;
  font-weight: bold;
  margin-bottom: 10rpx;
  text-shadow: 0 2rpx 4rpx rgba(0,0,0,0.3);
}

.banner-subtitle {
  font-size: 28rpx;
  opacity: 0.9;
  text-shadow: 0 2rpx 4rpx rgba(0,0,0,0.3);
}

.no-data-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80rpx 0;
}

.no-data-illustration {
  width: 160rpx;
  height: 160rpx;
  border-radius: 50%;
  background-color: #e6f7ff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 30rpx;
}

.illustration-icon {
  font-size: 80rpx;
  color: #1890ff;
}

.no-data-text {
  font-size: 32rpx;
  color: #999;
  margin-bottom: 40rpx;
}

.refresh-btn {
  background-color: #1890ff;
  color: white;
  border-radius: 100rpx;
  padding: 16rpx 40rpx;
  font-size: 28rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4rpx 12rpx rgba(24, 144, 255, 0.3);
}

.refresh-icon {
  margin-right: 10rpx;
}

.rank-content {
  padding: 24rpx;
}

.top-three-container {
  margin-bottom: 30rpx;
}

.top-three-wrapper {
  display: flex;
  justify-content: center;
  padding: 20rpx 0;
}

.top-three-item {
  display: flex;
  justify-content: center;
  width: 33.33%;
}

.top-three-card {
  background-color: white;
  border-radius: 20rpx;
  box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.08);
  padding: 20rpx;
  width: 90%;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: transform 0.3s ease;
}

.top-three-card:hover {
  transform: translateY(-5rpx);
}

.top-three-1 .top-three-card {
  background: linear-gradient(145deg, #fff3cd, #ffe69c);
  border: 2rpx solid #ffda6a;
}

.top-three-2 .top-three-card {
  background: linear-gradient(145deg, #f5f5f5, #e0e0e0);
  border: 2rpx solid #d9d9d9;
}

.top-three-3 .top-three-card {
  background: linear-gradient(145deg, #fbe9e7, #ffccbc);
  border: 2rpx solid #ffab91;
}

.top-three-medal {
  width: 48rpx;
  height: 48rpx;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  margin-bottom: 15rpx;
  position: relative;
  top: -40rpx;
  margin-bottom: -30rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.15);
}

.top-three-1 .top-three-medal {
  background-color: #ffd700;
  color: #8b4513;
}

.top-three-2 .top-three-medal {
  background-color: #c0c0c0;
  color: #666;
}

.top-three-3 .top-three-medal {
  background-color: #cd7f32;
  color: white;
}

.medal-text {
  font-size: 28rpx;
}

.top-three-avatar-placeholder {
  width: 100rpx;
  height: 100rpx;
  border-radius: 50%;
  margin-bottom: 15rpx;
  background-color: #e6f7ff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 48rpx;
  font-weight: bold;
  color: #1890ff;
  border: 4rpx solid white;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
}

.top-three-name {
  font-size: 28rpx;
  font-weight: bold;
  margin-bottom: 8rpx;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.top-three-point {
  font-size: 26rpx;
  color: #666;
}

.rank-list-container {
  background-color: white;
  border-radius: 20rpx;
  box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.08);
  overflow: hidden;
}

.rank-list-header {
  display: flex;
  padding: 20rpx 30rpx;
  border-bottom: 2rpx solid #f0f0f0;
}

.header-rank {
  width: 15%;
  font-size: 28rpx;
  font-weight: bold;
  color: #666;
}

.header-name {
  width: 60%;
  font-size: 28rpx;
  font-weight: bold;
  color: #666;
}

.header-point {
  width: 25%;
  font-size: 28rpx;
  font-weight: bold;
  color: #666;
  text-align: right;
}

.rank-list-wrapper {
  max-height: 600rpx;
  overflow-y: auto;
}

.rank-item {
  display: flex;
  align-items: center;
  padding: 24rpx 30rpx;
  border-bottom: 2rpx solid #f0f0f0;
  opacity: 0;
  transform: translateY(20px);
}

.rank-item:last-child {
  border-bottom: none;
}

.rank-item-highlight {
  background-color: #fafafa;
}

.rank-number-container {
  width: 15%;
  display: flex;
  align-items: center;
}

.rank-number {
  width: 48rpx;
  height: 48rpx;
  border-radius: 50%;
  background-color: #e6f7ff;
  color: #1890ff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26rpx;
  font-weight: bold;
}

.rank-user-info {
  width: 60%;
  display: flex;
  align-items: center;
}

.rank-avatar-placeholder {
  width: 64rpx;
  height: 64rpx;
  border-radius: 50%;
  margin-right: 20rpx;
  background-color: #e6f7ff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32rpx;
  font-weight: bold;
  color: #1890ff;
}

.rank-name {
  font-size: 28rpx;
  max-width: 80%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rank-point-container {
  width: 25%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.rank-point {
  font-size: 32rpx;
  font-weight: bold;
  color: #ff7a45;
  margin-right: 8rpx;
}

.rank-point-unit {
  font-size: 24rpx;
  color: #999;
}

.last-update-time {
  text-align: center;
  font-size: 24rpx;
  color: #999;
  margin-top: 20rpx;
  padding-bottom: 30rpx;
}
.fixed-header {
  position: sticky;
  top: 0;
  height: 44px; /* up-navbar 高度 */
  z-index: 999;
  background-color: transparent;
}
</style>
